<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-04-28 11:23:36
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-06-01 08:55:55
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="left">
        <div class="jur">
          <el-select v-model="jurisdiction" @change="jurChange">
            <el-option
              v-for="item in jurOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="type">
          <el-select
            v-model="types"
            multiple
            collapse-tags
            @change="typeChange"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="right">
        <el-button type="primary" size="default" @click="newSchedule"
          >新建日程</el-button
        >
      </div>
    </div>
    <v-app data-app="true">
      <v-row class="fill-height">
        <v-col>
          <v-sheet height="64">
            <v-toolbar flat color="white">
              <v-btn
                outlined
                class="mr-4"
                color="grey darken-2"
                @click="setToday"
              >
                今天
              </v-btn>
              <v-btn fab text small color="grey darken-2" @click="prev">
                <i class="iconfont icon-fanhui1"></i>
              </v-btn>
              <v-btn fab text small color="grey darken-2" @click="next">
                <i class="iconfont icon-xiangyou1"></i>
              </v-btn>
              <v-toolbar-title v-if="$refs.calendar">
                {{ $refs.calendar.title }}
              </v-toolbar-title>
              <v-spacer></v-spacer>
              <v-menu bottom right>
                <template v-slot:activator="{ on, attrs }">
                  <v-btn
                    outlined
                    color="grey darken-2"
                    v-bind="attrs"
                    v-on="on"
                  >
                    <span>{{ typeToLabel[type] }}</span>
                    <i class="iconfont icon-arrow-down"></i>
                  </v-btn>
                </template>
                <v-list>
                  <v-list-item @click="type = 'day'">
                    <v-list-item-title>天</v-list-item-title>
                  </v-list-item>
                  <v-list-item @click="type = 'week'">
                    <v-list-item-title>周</v-list-item-title>
                  </v-list-item>
                  <v-list-item @click="type = 'month'">
                    <v-list-item-title>月</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
            </v-toolbar>
          </v-sheet>
          <v-sheet height="600">
            <v-calendar
              ref="calendar"
              v-model="focus"
              color="primary"
              :events="events"
              :event-color="getEventColor"
              :type="type"
              @click:event="showEvent"
              @click:more="viewDay"
              @click:date="viewDay"
              @change="updateRange"
            ></v-calendar>
          </v-sheet>
        </v-col>
      </v-row>
    </v-app>
    <new-schedule
      :dialog="dialog"
      ref="schedule"
      v-if="dialog.newScheduleShowEject"
    ></new-schedule>
    <el-dialog
      :visible.sync="dialog.selectedOpen"
      custom-class="selected"
      width="30%"
    >
      <div slot="title" class="dialog-title">
        <i class="iconfont icon-bianji_o" @click="editMeeting"></i>
        <i class="iconfont icon-shanchu" @click="delMeeting"></i>
      </div>
      <div slot="title" class="content">
        <div class="con">{{ Meeting.content }}</div>
        <div class="time">
          {{ Meeting.startTime }}
          <span>至</span>
          {{ Meeting.finishTime }}
        </div>
      </div>
      <div class="creatTime">
        <span>创建时间：</span>
        <span>{{ Meeting.createTime }}</span>
      </div>
      <div class="participate">
        <span>参与人：</span>
        <div
          class="participate-user"
          v-for="item in Meeting.users"
          :key="item.id"
        >
          <el-tooltip
            effect="dark"
            :content="item.nickName"
            placement="top-start"
          >
            <div class="user-avatr">
              <img :src="item.avatar" alt="" />
            </div>
          </el-tooltip>
        </div>
      </div>
    </el-dialog>
    <clue-drawer
      :dialog="dialog"
      :drawerData="drawerData"
      v-if="dialog.clueDrawerEject"
    ></clue-drawer>
    <cus-drawer
      :dialog="dialog"
      :drawerData="drawerData"
      v-if="dialog.cusDrawerEject"
    ></cus-drawer>
    <business-drawer
      :dialog="dialog"
      :drawerData="drawerData"
      v-if="dialog.businessDrawerEject"
    ></business-drawer>
    <con-drawer
      :dialog="dialog"
      :drawerData="drawerData"
      v-if="dialog.dialogDrawerEject"
    ></con-drawer>
    <xshk-drawer
      :dialog="dialog"
      :drawerData="drawerData"
      v-if="dialog.dialogShowDrawerEject"
    ></xshk-drawer>
    <drawer
      :dialog="dialog"
      v-if="dialog.taskDrawerEject"
      :drawerData="drawerData"
    >
    </drawer>
    <qual-drawer
      :dialog="dialog"
      v-if="dialog.qualShowDrawerEject"
      :drawerData="drawerData"
    ></qual-drawer>
    <cert-drawer
      :dialog="dialog"
      v-if="dialog.certShowDrawerEject"
      :drawerData="drawerData"
    ></cert-drawer>
  </div>
</template>
<script>
import {
  getCalendar,
  attendInfo,
  deleteCal,
  detailInfo,
} from "../../api/calendar";
import newSchedule from "./components/newSchedule.vue";
import ClueDrawer from "./components/drawer/clueDrawer.vue";
import cusDrawer from "./components/drawer/cusDrawer.vue";
import businessDrawer from "./components/drawer/businessDrawer.vue";
import ConDrawer from "./components/drawer/conDrawer.vue";
import xshkDrawer from "./components/drawer/xDrawer.vue";
import drawer from "../../views/task/dailyTask/components/drawer.vue";
import qualDrawer from "./components/drawer/qualDrawer.vue";
import CertDrawer from "./components/drawer/certDrawer.vue";
export default {
  components: {
    newSchedule,
    ClueDrawer,
    cusDrawer,
    businessDrawer,
    ConDrawer,
    xshkDrawer,
    drawer,
    qualDrawer,
    CertDrawer,
  },
  data: () => ({
    dialog: {
      newScheduleShow: false,
      newScheduleShowEject: false,
      selectedOpen: false,
      activity: true,
      joinTeamShowEject: false,
      joinTeamShow: false,
      editTeamShowEject: false,
      editTeamShow: false,
      transferShow: false,
      transferShowEject: false,
      // 线索
      ejectClue: false,
      dialogClueShow: false,
      clueDrawer: false,
      clueDrawerEject: false,
      // 客户
      cusDrawer: false,
      cusDrawerEject: false,
      newCustomer: false,
      newCustomerEject: false,
      cusContactShow: false,
      // 商机
      businessDrawerEject: false,
      businessDrawer: false,
      dialogBusinessShow: false,
      dialogBusinessShowEject: false,
      relation: false,
      // 合同
      dialogDrawerEject: false,
      dialogDrawer: false,
      newContactShowEject: false,
      newContactShow: false,
      customerShowEject: false,
      customerShow: false,
      contractShowEject: false,
      contractShow: false,
      customerContractShowEject: false,
      customerContractShow: false,
      newPlanShow: false,
      newPlanShowEject: false,
      XshkDialog: false,
      XshkDialogEject: false,
      examineShow: false,
      customerContractShow: false,
      customerContractShowEject: false,
      OpportunityShow: false,
      OpportunityEject: false,
      // 回款
      dialogShowDrawerEject: false,
      dialogShowDrawer: false,
      newPlanShowEject: false,
      newPlanShow: false,
      dialogPerChaEject: false,
      dialogPerCha: false,
      // 任务
      taskDrawerEject: false,
      taskDrawer: false,
      crmInfoShow: false,
      crmInfoShowEject: false,
      aboutShow: false,
      aboutShowEject: false,
      newTaskShow: false,
      newTaskShowEject: false,
      // 资质
      qualShowDrawer: false,
      qualShowDrawerEject: false,
      // 证书
      certShowDrawerEject: false,
      certShowDrawer: false,
    },
    focus: "",
    type: "month",
    typeToLabel: {
      month: "月",
      week: "周",
      day: "天",
    },
    drawerData: {},
    jurOptions: [
      { value: 2, label: "全部的日程" },
      { value: 3, label: "部门的日程" },
      { value: 4, label: "部门及以下的日程" },
      { value: 5, label: "我的日程" },
    ],
    typeOptions: [
      {
        value: 1,
        label: "需联系的线索",
      },
      {
        value: 2,
        label: "需联系的客户",
      },
      {
        value: 3,
        label: "需联系的商机",
      },
      {
        value: 4,
        label: "预计成交的商机",
      },
      {
        value: 5,
        label: "即将到期合同",
      },
      {
        value: 6,
        label: "计划回款日期",
      },
      {
        value: 7,
        label: "即将到期证书",
      },
      {
        value: 8,
        label: "即将到期资质",
      },
      {
        value: 9,
        label: "分配的任务",
      },
      {
        value: 10,
        label: "开会",
      },
    ],
    jurisdiction: 5,
    types: [1],
    startTime: "",
    endTime: "",
    selectedEvent: {},
    selectedElement: null,
    events: [],
    Meeting: {},
  }),
  mounted() {
    this.$refs.calendar.checkChange();
  },
  created() {
    console.log(this.$route.query.dayTime);
    if (this.$route.query.dayTime !== undefined) {
      this.focus = this.$route.query.dayTime;
      this.type = "day";
    }
  },
  methods: {
    // 获取模块详情
    detailInfo(id, module) {
      detailInfo({
        id: id,
        module: module,
      }).then((res) => {
        if (module == 8) {
          this.drawerData = res.data;
          this.dialog.clueDrawerEject = true;
          this.$nextTick(() => {});
          this.dialog.clueDrawer = true;
        } else if (module == 9) {
          this.drawerData = res.data;
          this.dialog.cusDrawerEject = true;
          this.$nextTick(() => {
            this.dialog.cusDrawer = true;
          });
        } else if (module == 12) {
          this.drawerData = res.data;
          this.dialog.businessDrawerEject = true;
          this.$nextTick(() => {
            this.dialog.businessDrawer = true;
          });
        } else if (module == 60) {
          this.drawerData = res.data;
          this.dialog.dialogDrawerEject = true;
          this.$nextTick(() => {
            this.dialog.dialogDrawer = true;
          });
        } else if (module == 71) {
          this.drawerData = res.data;
          this.dialog.dialogShowDrawerEject = true;
          this.$nextTick(() => {
            this.dialog.dialogShowDrawer = true;
          });
        } else if (module == 32) {
          this.drawerData = res.data;
          this.dialog.certShowDrawerEject = true;
          this.$nextTick(() => {
            this.dialog.certShowDrawer = true;
          });
        } else if (module == 35) {
          this.drawerData = res.data;
          this.dialog.qualShowDrawerEject = true;
          this.$nextTick(() => {
            this.dialog.qualShowDrawer = true;
          });
        } else if (module == 40) {
          this.drawerData = res.data;
          this.dialog.taskDrawerEject = true;
          this.$nextTick(() => {
            this.dialog.taskDrawer = true;
          });
        }
      });
    },
    // 删除
    async delMeeting() {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该回款, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        deleteCal({
          id: this.Meeting.id,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getList();
          this.dialog.selectedOpen = false;
        });
      }
    },
    // 修改会议
    editMeeting() {
      this.dialog.newScheduleShowEject = true;
      this.$nextTick(() => {
        this.$refs["schedule"].scheduleForm = this.Meeting;
        this.dialog.newScheduleShow = true;
      });
    },
    // 场景选择
    typeChange() {
      this.getList();
    },
    // 日程选择
    jurChange() {
      this.getList();
    },
    // 新建日程
    newSchedule() {
      this.dialog.newScheduleShowEject = true;
      this.$nextTick(() => {
        this.dialog.newScheduleShow = true;
      });
    },
    // 获取日历
    getList(start, end) {
      getCalendar({
        jurisdiction: this.jurisdiction,
        types: this.types,
        startTime: this.startTime,
        endTime: this.endTime,
      }).then((res) => {
        res.data.map((item) => {
          item.start = new Date(item.start);
          item.end = new Date(item.end);
        });
        this.events = res.data;
        console.log(res.data);
      });
    },
    viewDay({ date }) {
      this.focus = date;
      this.type = "day";
    },
    getEventColor(event) {
      return event.color;
    },
    setToday() {
      this.focus = "";
    },
    prev() {
      this.$refs.calendar.prev();
    },
    next() {
      this.$refs.calendar.next();
    },
    getMeeting(id) {
      attendInfo({
        id: id,
      }).then((res) => {
        this.Meeting = res.data;
      });
    },
    showEvent({ nativeEvent, event }) {
      console.log(event);
      if (event.module == 0) {
        this.dialog.selectedOpen = true;
        this.getMeeting(event.id);
      } else {
        this.detailInfo(event.id, event.module);
      }
    },
    async updateRange({ start, end }) {
      this.startTime = start.date;
      this.endTime = end.date;
      await this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  margin-top: 20px;
  height: 80vh;
  font-size: 16px;
}
/deep/.v-btn__content {
  font-size: 16px;
}
/deep/.v-toolbar__title {
  font-size: 16px;
}
/deep/.v-list-item__title {
  font-size: 16px;
}
/deep/.v-btn {
  font-size: 16px;
}
/deep/ .v-menu__content {
  min-width: 350px !important;
}

.header {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    .type {
      margin-left: 20px;
    }
  }
}
.dialog-title {
  display: flex;
  justify-content: end;
  margin-right: 30px;
  i {
    cursor: pointer;
    color: #fff;
  }
  i:nth-child(2) {
    margin-left: 10px;
  }
}

.content {
  .con {
    margin-top: 20px;
    color: #fff;
    font-size: 20px;
    height: 100px;
    overflow: hidden;
  }
  .time {
    color: #fff;
    font-size: 20px;
  }
}
.creatTime {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #2b2b2b;
  font-size: 16px;
}
.participate {
  color: #2b2b2b;
  font-size: 16px;
  display: flex;
  align-items: center;
  .participate-user {
    margin-left: 20px;
  }
  .user-avatr {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 40px;
    }
  }
}
/deep/.selected {
  .el-dialog__header {
    height: 200px;
    background-color: #1267fa;
    i {
      color: #fff;
    }
  }
}
/deep/ .v-present {
  .v-btn__content {
    font-size: 12px;
  }
}
</style>
